<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 精选题库 -->
        <!-- 上方 -->
        <el-row type="flex" justify="space-between" style="margin-bottom:15px">
          <span style="font-size: 12px;color: pink;">说明：目前支持学科和关键字条件筛选</span>
          <el-button type="success" icon="el-icon-edit" size="mini" @click="$router.push('/questions/new')">新增试题</el-button>
        </el-row>
        <!-- 表单 -->
        <el-form label-width="80px" :model="queryParams">
          <!-- 第一行 -->
          <el-row type="flex">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="queryParams.subjectID"
                  size="mini"
                  style="width:100%"
                  @change="subjectChange"
                >
                  <!-- 学科一级选项 -->
                  <el-option
                    v-for="item in subjectList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  v-model="queryParams.catalogID"
                  size="mini"
                  style="width:100%"
                >
                  <!-- 二级目录选项 -->
                  <el-option
                    v-for="item in secondList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="queryParams.tags" size="mini" style="width:100%">
                  <!-- 二级 tag 选项 -->
                  <el-option
                    v-for="item in tagsList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input v-model="queryParams.keyword" size="mini" placeholder="根据题干搜索" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row type="flex">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="queryParams.questionType" size="mini" style="width:100%">
                  <el-option :value="'1'" :label="'单选题'"></el-option>
                  <el-option :value="'2'" :label="'多选题'"></el-option>
                  <el-option :value="'3'" :label="'简答题'"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="queryParams.difficulty" size="mini" style="width:100%">
                  <el-option :value="'1'" :label="'简单'"></el-option>
                  <el-option :value="'2'" :label="'一般'"></el-option>
                  <el-option :value="'3'" :label="'困难'"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="queryParams.direction" size="mini" style="width:100%">
                  <el-option
                    v-for="item in directionList"
                    :key="item.label"
                    :value="item.label"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="queryParams.creatorID" size="mini" placeholder="根据题干搜索" style="width:100%">
                  <el-option v-for="item in creatorList" :key="item.id" :label="item.username" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row type="flex">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="queryParams.remarks" size="mini" style="width:100%"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="queryParams.shortName" size="mini" style="width:100%"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="城市">
                <el-row type="flex">
                  <el-select
                    v-model="queryParams.province"
                    size="mini" style="width:100%; margin-right: 5px;"
                    @change="cityChange"
                  >
                    <el-option
                      v-for="(item,index) in cityList"
                      :key="index"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <el-select v-model="queryParams.city" size="mini" style="width:100%">
                    <el-option
                      v-for="(item,index) in areaList"
                      :key="index"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item>
                <el-row type="flex" justify="end">
                  <el-button size="mini" @click="clearClick">清除</el-button>
                  <el-button size="mini" type="primary" @click="getChoiceData">搜索</el-button>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 选项卡 -->
        <template>
          <el-tabs
            v-model="activeName"
            type="card"
            @tab-click="handleClick"
            >
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="待审核" name="wait"></el-tab-pane>
            <el-tab-pane label="已审核" name="done"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="reject"></el-tab-pane>
            <!-- 消息提示 -->
            <el-alert :title="elAlertTitle" type="info" show-icon :closable="false" style="margin-bottom: 10px;"/>
            <!-- 表格 -->
            <el-table :data="choiceData" :header-cell-style="{'backgroundColor':'#fafafa'}">
              <!-- 第一列 -->
              <el-table-column label="试题编号" prop="number" width="120"></el-table-column>
              <!-- 第二列 -->
              <el-table-column label="学科" prop="subject" width="150"></el-table-column>
              <!-- 第三列 -->
              <el-table-column label="目录" prop="catalog" width="150"></el-table-column>
              <!-- 第四列 -->
              <el-table-column label="题型" prop="questionType" width="150">
                <template #default="{row}">
                  <span v-if="row.questionType === '1'">单选</span>
                  <span v-else-if="row.questionType === '2'">多选</span>
                  <span v-else-if="row.questionType === '3'">简答</span>
                </template>
              </el-table-column>
              <!-- 第五列 -->
              <el-table-column label="题干" prop="question" width="300">
                  <template #default="{row}">
                    <span>{{ h52text(row.question) }}</span>
                  </template>
                </el-table-column>
              <!-- 第六列 -->
              <el-table-column label="录入时间" prop="addDate" width="200"></el-table-column>
              <!-- 第七列 -->
              <el-table-column label="难度" prop="difficulty" width="100">
                <template #default="{row}">
                  <span v-if="row.difficulty === '1'">简单</span>
                  <span v-else-if="row.difficulty === '2'">一般</span>
                  <span v-else-if="row.difficulty === '3'">困难</span>
                </template>
              </el-table-column>
              <!-- 第八列 -->
              <el-table-column label="录入人" prop="creator" width="130"></el-table-column>
              <!-- 第九列 -->
              <el-table-column label="审核状态" prop="chkState" width="130">
                <template #default="{row}">
                  <span v-if="row.chkState === 0">待审核</span>
                  <span v-else-if="row.chkState === 1">已审核</span>
                  <span v-else-if="row.chkState === 2">已拒绝</span>
                </template>
              </el-table-column>
              <!-- 第十列 -->
              <el-table-column label="审核意见" prop="chkRemarks" width="150"></el-table-column>
              <!-- 第十一列 -->
              <el-table-column label="审核人" prop="chkUser" width="120"></el-table-column>
              <!-- 第十二列 -->
              <el-table-column label="发布状态" prop="publishState" width="150">
                <template #default="{row}">
                  <span v-if="row.chkState === 0">待发布</span>
                  <span v-else-if="row.publishState === 1">已发布</span>
                  <span v-else-if="row.publishState === 0">已下架</span>
                </template>
              </el-table-column>
              <!-- 第十三列 固定列 -->
              <el-table-column
                fixed="right"
                label="操作"
                width="200"
                align="center"
              >
                <template #default="{row}">
                  <el-row type="flex" justify="space-between">
                    <el-button @click="previewClick(row)" type="text" size="small">预览</el-button>
                    <el-button type="text" size="small" :disabled="row.chkState !== 0" @click="shenheClick(row)">审核</el-button>
                    <el-button @click="$router.push({path:'/questions/new', query: {id:row.id} })" type="text" size="small" :disabled="row.publishState === 1">修改</el-button>
                    <el-button v-if="row.publishState === 0" type="text" size="small" @click="upclick(row,1)">上架</el-button>
                    <el-button v-else-if="row.publishState === 1" type="text" size="small" @click="upclick(row,0)">下架</el-button>
                    <template>
                      <el-button type="text" size="small" @click="delclick(row)" :disabled="row.publishState === 1">删除</el-button>
                    </template>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </el-tabs>
        </template>

        <!-- 分页器 -->
        <el-row type="flex" justify="end">
          <el-pagination
            background
            :page-size="queryParams.pagesize"
            :page-sizes="[5,10,20,50]"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
            @current-change="currentChange"
            @size-change="sizeChange"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 审核dialog -->
    <questions-check :dialogVisible.sync="dialogVisible" :checkCurrentId="checkCurrentId" @shenheOK="getChoiceData()"></questions-check>
    <!-- 预览dialog -->
    <questions-preview
      ref="previewDialog"
      :showPreviewDialog.sync="showPreviewDialog"
      :previewRow="previewRow"
    ></questions-preview>
  </div>
</template>

<script>
import { choice, choicePublish, remove } from '@/api/hmmm/questions.js'
import { simple as subjectSimple } from '@/api/hmmm/subjects.js'
import { simple as secondSimple } from '@/api/hmmm/directorys.js'
import { simple as tagSimple } from '@/api/hmmm/tags.js'
import { simple as creatorList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { parseTime, html2Text } from '@/utils/index.js'
import QuestionsCheck from '../components/questions-check.vue'
import questionsPreview from '../components/questions-preview.vue'

export default {
  components: {
    QuestionsCheck,
    questionsPreview
  },
  data () {
    return {
      previewRow: {},
      previewCurrentId: null,
      checkCurrentId: null,
      dialogVisible: false,
      // 请求携带参数
      queryParams: {
        page: 1, // 当前页数
        pagesize: 5, // 每页数量
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: '', // 企业所在省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      },
      // tabs 选项卡的选中项
      activeName: 'all',
      // 精选题库数据列表
      choiceData: [],
      // 学科 select 数据列表
      subjectList: [],
      // 二级目录 select 目录列表
      secondList: [],
      // 二级tag select 列表
      tagsList: [],
      // 方向列表
      directionList: [
        { label: 'o2o' },
        { label: '外包服务' },
        { label: '企业服务' },
        { label: '互联网金融' },
        { label: '企业咨询' },
        { label: '互联网' },
        { label: '电子商务' },
        { label: '其他' }
      ],
      // 录入人列表
      creatorList: [],
      // 城市列表
      cityList: [],
      // 地区列表
      areaList: [],
      total: null,
      // 控制预览的显示/隐藏
      showPreviewDialog: false
    }
  },
  computed: {
    // el-alert 标题
    elAlertTitle () {
      return '数据一共' + this.total + '条'
    }
  },
  created () {
    // 获取表格数据
    this.getChoiceData()
    // 获取学科
    this.getSubjectList()
    // 获取城市列表
    this.getCityList()
    // 获取录入人列表
    this.getCreatorList()
  },
  // 获取精选题库数据
  methods: {
    // 预览按钮
    async previewClick (row) {
      // 显示
      this.showPreviewDialog = true
      // 把id存到本地
      // this.previewCurrentId = row.id
      // 把row页存到本地
      this.previewRow = row
      // const res = await detail(row)
      // console.log(res)
      // console.log(this.$refs.previewDialog)
      this.$nextTick(() => {
        this.$refs.previewDialog.getDetailData()
      })
    },
    // 审核按钮
    shenheClick (row) {
      this.dialogVisible = true
      this.checkCurrentId = row.id
    },
    // 将html转为text
    h52text (res) {
      return html2Text(res)
    },
    async getChoiceData () {
      try {
        const { data } = await choice(this.queryParams)
        // console.log(data)
        // 处理时间格式
        data.items.forEach(item => {
          item.addDate = parseTime(item.addDate)
        })
        this.choiceData = data.items
        this.total = data.counts
      } catch (error) {
        Promise.reject(error)
      }
    },
    // 获取学科 select 列表
    async getSubjectList () {
      try {
        const res = await subjectSimple()
        this.subjectList = res.data
      } catch (error) {
        Promise.reject(error)
      }
    },
    // 一级学科发生了 change
    async subjectChange (val) {
      // 获取二级目录
      try {
        const { data } = await secondSimple({ id: val })
        this.secondList = data
      } catch (error) {
        Promise.reject(error)
      }
      // 获取二级tag
      try {
        const res = await tagSimple({ id: val })
        this.tagsList = res.data
      } catch (error) {
        Promise.reject(error)
      }
    },
    // tabs 选项卡的值发生了变化
    handleClick () {
      // 判断 name
      if (this.activeName === 'all') {
        this.queryParams.chkState = null
      } else if (this.activeName === 'wait') {
        this.queryParams.chkState = 0
      } else if (this.activeName === 'done') {
        this.queryParams.chkState = 1
      } else if (this.activeName === 'reject') {
        this.queryParams.chkState = 2
      }
      this.getChoiceData()
    },
    // 分页器切换页码
    currentChange (currentPage) {
      this.queryParams.page = currentPage
      // 重新请求数据
      this.getChoiceData(this.queryParams)
    },
    // 分页器切换每页条数
    sizeChange (currentCounts) {
      this.queryParams.pagesize = currentCounts
      // 发请求拿新数据
      this.getChoiceData(this.queryParams)
    },
    // 清空表单按钮
    clearClick () {
      // 将表单双向绑定数据 重新赋值为初始化
      this.queryParams = {
        page: 1, // 当前页数
        pagesize: 10, // 每页数量
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: '', // 企业所在省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      }
    },
    // 获取城市列表
    getCityList () {
      this.cityList = provinces()
    },
    // 获取录入人列表
    async getCreatorList () {
      try {
        const { data } = await creatorList()
        // console.log(res)
        this.creatorList = data
      } catch (error) {
        Promise.reject(error)
      }
    },
    // 城市一旦发生了变化
    async cityChange (val) {
      try {
        this.areaList = await citys(val)
      } catch (error) {
        Promise.reject(error)
      }
    },
    // 固定列 --- 删除按钮
    delclick (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 调接口 返回新数据
          await remove(row).then(() => {
            if (this.queryParams.page > 1) {
              this.queryParams.page -= 1
            }
            this.getChoiceData()
          })
        } catch (error) {
          Promise.reject(error)
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 固定列 --- 上架按钮
    upclick (row, publishState) {
      let desc
      // 上架
      if (row.chkState === 0) {
        desc = '您确认上架这道题目吗?'
      } else if (row.chkState === 1) {
        desc = '您确认下架这道题目吗?'
      }
      this.$confirm(desc, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 调接口 上架
          await choicePublish({ id: row.id, publishState })
          // 重新获取总数据
          this.getChoiceData()
        } catch (error) {
          Promise.reject(error)
        }

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped></style>
